
#gradientVertDarkBtn {
    background-image:-webkit-linear-gradient( #666,#222,#444);
    background-image:-moz-linear-gradient(top,#666,#222,#444);
    background-image:linear-gradient(         #666,#222,#444);
}

#CenterBlock {
  display: block;
  margin-left:  auto;
  margin-right: auto;
}

#logo_reflect {
  #CenterBlock ;
  margin-top: 30px;
}

#MenuWrapper {
  margin-top: 40px;
}

ul#mainMenu {
  /*display: inline-block;*/
  #CenterBlock;
  width: 445px;  /* Need to set a width for this element so the centering actually works, 
                     since we have to use the "clearfix" class to fix the container no-height issue */
  vertical-align: top;
  border: none;
  background: none; /* override */
  
  li {
    margin: 4px;
    width:  135px; /* give each button the same width  */
  
    a {
      #gradientVertDarkBtn;
      font-size: 17px;
      padding-right: 25px;
      padding-left:  19px;
    }
    ul {
      a {
        background: #313131; /* same color as the rest of the bg in the submenu */
        padding-right: 3px;
        padding-left:  3px;
      }
      li {
        width: auto; /* override the parent's contrained width */
      }
      li:hover {
        a {
          font-size: 17px;
        }
      }
    }
  }
  li:hover {
    a {
      font-size: 17px;
    }
  }
  ul {
    
  }
}

/* Make the container of elements with floated elements have size large enough to contain the floated elements */
.clearfix:after { /* http://css-tricks.com/snippets/css/clear-fix/ */
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}